<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<link href="../assets/css/bootstrap.css" rel="stylesheet" />
    <!-- FontAwesome Styles-->
    <link href="../assets/css/font-awesome.css" rel="stylesheet" />
    <link href="../css/pulic.css" rel="stylesheet"/>
    <!-- Google Fonts-->
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
    <!-- TABLE STYLES-->
    <link href="../assets/js/dataTables/dataTables.bootstrap.css" rel="stylesheet" />
    <script type="text/javascript" src="../js/jquery-3.2.1"></script>
    <script src="../js/jquery-3.2.1/jquery-3.2.1.js"></script>
</head>
<br>

<div class="panel-body">
    <div class="table-responsive">
        <table class="table table-hover" id="tableTop">
            <thead>
            <tr>
                <th>流程信息</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td width="20%"  style="text-align: center">流程名称</td>
                <c:forEach items="${listProcessMsg }" var="processMsg" begin="0" end ="0">
                 	<td width="60%">${processMsg.reimbursementTypeName }</td>
                </c:forEach>
               
               <!--  <td width="20%"><input type="submit" value="重新回调流程"></td> -->
            </tr>
            <tr>
                <td style="text-align: center">流程状态</td>
                <td id="taking"></td>
                <td></td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<div class="panel-body">
    <div class="table-responsive">
        <h4 style="font-weight: 800">流程追踪表</h4>
        <table class="table table-hover" id="tableDown">
            <thead>
            <tr>
                <th width="5%">序号</th>
                <th width="11%">活动名称</th>
                <th width="9%">处理岗位</th>
                <th width="7%">处理人</th>
                <th width="9%">审批意见</th>
                <th width="6%">状态</th>
                <th width="19%">申请时间</th>
                <th width="19%">审批时间</th>
                <th width="15%">退回意见</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach items="${listProcessMsg }" var="ProcessMsg" varStatus="status">
             <tr id="ProcessMsg${status.index }">
                <td width="5%"></td>
                <td width="11%">${ProcessMsg.roleName }</td>
                <td width="9%" style="color: #0088CC">${ProcessMsg.departmentName }</td>
                <td width="7%" style="color: #0088CC">${ProcessMsg.userName }</td>
                <td width="9%" style="color: #0088CC" class="state" id="state${status.index}">${ProcessMsg.approvalStateName }</td>
                <td width="6%">${ProcessMsg.workStateName }</td>
                <td width="19%">${ProcessMsg.reimbursementTime }</td>
                <td width="19%">${ProcessMsg.approvalTime }</td>
                <td width="15%">${ProcessMsg.approvalOpinion }</td>
            </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>
</div>

<div style="margin-left: 1.5%">
    <!-- <input type="submit" value="重新回调流程"> -->使用说明：</br>
    1.提交报账单后，流程跟踪没有产生下一环节待办工作，不包含等待扫描、等待生成SAP凭证等单据正常挂起的情况；</br>
    2.已办工作打印报账单时，提示【请提交流程后再打印报账单】的情况；</br>
    3.提交流程时，提示【该流程对应的引擎任务实例ID为空，请稍后提交或者在流程跟踪进行回调操作！】的情况 
</div>
<!-- <div class="col-md-4 col-sm-4">
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                           	使用说明：
                        </div>
                        <div class="panel-body">
                            <p>1.提交报账单后，流程跟踪没有产生下一环节待办工作，不包含等待扫描、等待生成SAP凭证等单据正常挂起的情况；</p>
                            <p>2.已办工作打印报账单时，提示【请提交流程后再打印报账单】的情况；</p>
                            <p>3.提交流程时，提示【该流程对应的引擎任务实例ID为空，请稍后提交或者在流程跟踪进行回调操作！】的情况</p>
                        </div>
                        <div class="panel-footer">
                          
                        </div>
                    </div>
                </div> -->
<script>

window.onload = function(){
	 var oTable = document.getElementById("tableDown");
	 for(var i=0;i<oTable.rows.length;i++){
	  oTable.rows[i+1].cells[0].innerHTML = (i+1);
	  if(i%2==0) //偶数行
	   oTable.rows[i].className = "ys01";
	 } 
	}
	
	//流程状态
	$(function(){
		//倒数第二个的审批意见
		var second = parseInt($(".state").length)-2;
		var secondSate = $("#state"+second).text(); 
		console.log(secondSate);
		//最后一个的审批意见
		var last = parseInt($(".state").length)-1;
		var lastSate = $("#state"+last).text(); 
		console.log("----:"+lastSate);
		if(secondSate == "同意" && lastSate == "同意"){
			$("#taking").text("流程完成");
		}else{
			$("#taking").text("流转中");
		}
	});

</script>
</body>
</html>

